<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 600px; height: 500px;"></div>
    <script src="../lib/echarts.min.js"></script>
    <script>
        let mychart = echarts.init(document.querySelector('div'))
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: ['#90b', '#8df']
                    }
                }
            },
            series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar',
                    name: '降水量'
                },
                {
                    data: [250, 130, 124, 118, 235, 217, 160],
                    type: 'bar',
                    name: '降火量'
                },
                {
                    data: [190, 170, 204, 118, 155, 147, 280],
                    type: 'line',
                    name: '降雪量'
                }
            ],
            title: {
                text: '折线图',
                left: 'center',

            },
            //网格（指的是直角坐标系的大小，位置）
            grid: {
                top: 120, //默认单位px
            },
            legend: {
                top: '50'
            },
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#90b' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#8df' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#8df' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'pink' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }],
            tooltip:{
                trigger:'axis'
            }
        };

        mychart.setOption(option)
    </script>
</body>

</html>